CSS Text Shadow

The text-shadow property adds shadow to text.

In its simplest use, you only specify the horizontal shadow (2px) and the vertical shadow (2px):

Example



      <!DOCTYPE html>
      <html>
      <head> 
      <style> 

      h1  {
         text-shadow: 2px 2px;
                 }
                                                     
      </style> 
      </head> 
      <body> 

      <h1>ACADEMY OF INFORMATION TECHNOLOGY</h1>
    

  
          </body>
          </html>

Result:

Next, add a color (red) to the shadow:

Example



      <!DOCTYPE html>
      <html>
      <head> 
      <style> 

      h1  {
         text-shadow: 2px 2px red;
    
            }

      </style> 
      </head> 
      <body> 

      <h1>ACADEMY OF INFORMATION TECHNOLOGY</h1>
   
          </body>
          </html>

Result:

Then, add a blur effect (5px) to the shadow:

Example



      <!DOCTYPE html>
      <html>
      <head> 
      <style> 

      h1  {
         text-shadow: 2px 2px 5px red;
    
            }

      </style> 
      </head> 
      <body> 

      <h1>ACADEMY OF INFORMATION TECHNOLOGY</h1>
   
          </body>
          </html>